<template>
	<view>
		<view class="status_bar">

		</view>
		<view class="top">
			<view @click="showFlag=true" class="top-title">
				<text>{{name}}垃圾焚烧厂</text>
			</view>
			<view class="top-right">
				<image src="../../static/index/icon_logo.png" mode="widthFix"></image>
				<text>生活垃圾无害化全过程运营监管系统</text>
			</view>
		</view>

		<view class="center">
			<view class="center-left">
				<view @click='index===0?toPre():toShow(index)' class="center-left-item" v-for="item,index in btnListLeft" :key='index'>
					<text class="center-left-item-home">{{item.name}}</text>
				</view>
			</view>

			<view class="center-center">
				<view class="center-center-item">
					<text>昨日垃圾进厂量（吨）：<text class="data_item">{{homeDate.garbageNumber}}</text></text>
				</view>
				<view class="center-center-item">
					<text>垃圾池库存量（吨）：<text class="data_item">{{homeDate.garbageStock}}</text></text>
				</view>
				<view class="center-center-item">
					<text>渗滤液产生量/处理量/库存量（吨）：<text class="data_item">{{homeDate.leachateProduce}}</text><text
							class="data_item">/</text><text class="data_item">{{homeDate.leachateDeal}}</text><text
							class="data_item">/</text><text class="data_item">{{homeDate.leachateStock}}</text></text>
				</view>
				<view class="center-center-item">
					<text>昨日发电量（kWh）<strong></strong>：<text class="data_item">{{homeDate.powerGeneration}}</text></text>
				</view>
				<view class="center-center-item">
					<text>产能/处理量（吨）：<text class="data_item">{{homeDate.capacity}}</text><text
							class="data_item">/</text><text class="data_item">{{homeDate.processing}}</text></text>
				</view>
				<view class="center-center-item">
					<text>炉况：
						<text class="data_item">{{homeDate.stoveNumber}}</text>炉<text v-html="'&nbsp;'"></text><text
							class="data_item">{{homeDate.immediately}}</text> 机<text v-html="'&nbsp;'"></text><text
							class="data_item" v-if="homeDate.status!='none'">{{homeDate.status==0?'停炉':homeDate.status==1?'运行':''}}</text>
						<text class="data_item">{{homeDate.remarks}}</text></text>
				</view>


				<view v-for="(item,index) in pointData" class="center-center-item">
					<text>{{item.source}}</text>
					<image @click="item.qualified==='0'?showDescrib(item):null" class="dot"
						:src="item.qualified==='0'?url1:url2" mode="widthFix"></image>
				</view>
				<!-- <view class="center-center-item" v-for="item,index in pointData.dangerParameterList">
					<text>{{pointData.source}}-{{item.parameter}}：</text>
					<image @click="item.qualified==='0'?showDescrib(item):null" class="dot"
						:src="item.qualified==='0'?url1:url2" mode="widthFix"></image>
				</view>
 -->
			</view>

			<view class="center-right">
				<view @click="toShowRight(index)" class="center-left-item" v-for="(item,index) in btnListRight"
					:key='index'>
					<text class="center-left-item-home">{{item.name}}</text>
				</view>
			</view>
		</view>

		<!-- 弹框——消息提示 -->
		<u-popup class="messageBox" v-model="show" mode="center" :closeable="true" close-icon-size="30rpx" width='370'
			height='220' close-icon="close-circle-fill">
			<view class="messageBox-content">重要提醒</view>
			<view class="messageBox-image" @click="toMessage">
				<image src="../../static/index/button_ljck.png" mode="widthFix"></image>
			</view>
		</u-popup>

		<!-- 是否退出登录 -->
		<u-modal border-radius=0 :confirm-style="{'font-size':'20rpx','padding':'-10rpx'}" :cancel-style="{'font-size':'20rpx','padding':'-10rpx'}"
			:content-style="{'font-size':'20rpx','padding':'10rpx'}" :show-cancel-button="true" width=30% height=30% :show-title='false'
			v-model="showFlag" :content="content" @confirm="confirm"></u-modal>

		<!-- 点击红色按钮   弹出异常问题描述 -->
		<u-popup v-model="propshow" mode='center' width="200rpx" height="150rpx">
			<scroll-view scroll-y="true" class="cont">{{contentDescrib}}</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				propshow: false,
				show: false,
				showFlag: false,
				content: '是否退出登录?',
				btnListLeft: [{
					name: '首页',
					url: ""
				}, {
					name: '消息通知',
				}, {
					name: '计量监管',
					url: "../measurementManage/measurementManage"
				}, {
					name: '安全监管',
					url: "../safetySupervision/safetySupervision"
				}, {
					name: '环境监测',
					url: "../environmentalTest/environmentalTest"
				}],
				btnListRight: [{
					name: '整改联系单',
					url: "../rectificationContact/rectificationContact"
				}, {
					name: '监管会议',
					url: "../supervisoryMeeting/supervisoryMeeting"
				}, {
					name: '监管考评',
					url: "../regulatoryAssessment/regulatoryAssessment"
				}, {
					name: '档案报告',
					url: "../fileReport/fileReport"
				}],
				// workingData: {},
				// garbelData: "",
				// percolateData: {},
				homeDate: {},
				// safeDay: '',
				pointData: [],
				url1: '../../static/index/img_yx2.png',
				url2: '../../static/index/img_yx1.png',
				contentDescrib: '',
				name: "",
			}
		},
		onLoad(e) {
			/* 从登录页进来，弹出消息框 */
			if (e.id === "'1'") {
				this.show = true
			}
			// this.selectHomePage()
			// this.selectHomePage
			this.selectHomeData()
			this.getBeforeDate(1)
			this.selectName()
			this.selectRecentlyDangerSource()

		},
		beforeUpdate() {
			// this.selectHomeData()
			// this.selectName()
			// this.selectDangerSource()
			// this.getBeforeDate(1)

			// this.selectStove()
			// this.selectHomePage()
			// this.selectHomePage2()
			// this.selectHomeData()
			// this.selectName()
		},
		methods: {
			/* 点击首页刷新页面 */
			toPre(){
				this.selectHomeData()
				this.getBeforeDate(1)
				this.selectRecentlyDangerSource()
				this.selectName()
			},
			toMessage() {
				this.show = false
				uni.navigateTo({
					url: '../message-manage/message-manage'
				})
			},
			toShow(index) {
				if (index === 1) {
					this.show = true
				} else {
					/* 跳转页面 */
					uni.navigateTo({
						url: this.btnListLeft[index].url
					})
				}
			},
			toShowRight(index) {
				uni.navigateTo({
					url: this.btnListRight[index].url
				})
			},
			confirm() {
				uni.reLaunch({
					url: '../login-register/login-register'
				})
			},
			/* 查询炉况 */
			// async selectStove() {
			// 	const res = await this.$u.api.selectStove()
			// 	console.log(res);
			// 	if (!res.success) {
			// 		return;
			// 	}
			// 	this.workingData = res.body.data
			// 	console.log(this.workingData);
			// },
			// async selectHomePage() {
			// 	const res = await this.$u.api.selectHomePage({
			// 		type: 1
			// 	})
			// 	if (!res.success) {
			// 		return;
			// 	}
			// 	this.garbelData = res.body.data
			// },
			// async selectHomePage2() {
			// 	const res = await this.$u.api.selectHomePage({
			// 		type: 2
			// 	})
			// 	if (!res.success) {
			// 		return;
			// 	}
			// 	this.percolateData = res.body.data
			// },
			async selectHomeData() {
				const res = await this.$u.api.selectHomeData()
				console.log(res);
				if (!res.success) {
					return;
				}
				this.homeDate = res.body.data
			},
			/* 获取当前日期的前一天 */
			getBeforeDate(num, time) {
				let n = num;
				let d = '';
				if (time) {
					d = new Date(time);
				} else {
					d = new Date();
				}
				let year = d.getFullYear();
				let mon = d.getMonth() + 1;
				let day = d.getDate();
				if (day <= n) {
					if (mon > 1) {
						mon = mon - 1;
					} else {
						year = year - 1;
						mon = 12;
					}
				}
				d.setDate(d.getDate() - n);
				year = d.getFullYear();
				mon = d.getMonth() + 1;
				day = d.getDate();
				let s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
				console.log(s);
				this.safeDay = s
			},
			/* 安全监测点 */
			async selectRecentlyDangerSource(){
				this.pointData=[]
				const res=await this.$u.api.selectRecentlyDangerSource({
					pageSize:'3',
					pageNo:'1'
				})
				this.pointData=res.body.data.list
				console.log(this.pointData);
			},
			// async selectDangerSource() {
			// 	this.pointData=[]
			// 	const res = await this.$u.api.selectDangerSource({
			// 		day: this.safeDay,
			// 		type:1
			// 	})
			// 	console.log(res);
			// 	console.log(this.safeDay);
			// 	if (!res.success) {
			// 		console.log(res.msg);
			// 		return;
			// 	}
			// 	console.log(res);
			// 	res.body.data.forEach((item, index) => {
			// 		if (index <= 4) {
			// 			this.pointData.push(item)
			// 		}
			// 	})

			// 	console.log(this.pointData);
			// },
			// showDescrib(item) {
			// 	if (item) {
			// 		console.log(item);
			// 		console.log(item.description);
			// 		this.propshow = true
			// 		this.contentDescrib = item.description
			// 	}
			// },
			/* 查询工厂名称 */
			async selectName() {
				const res = await this.$u.api.selectName()
				this.name = res.body.data
			}
		}
	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
	}

	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.top {
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
		height: 50rpx;
		width: 100%;
		background-image: url(../../static/index/img_db.png);
		/* border-top: 1rpx solid #FEFEFF; */
		border-width: 2rpx 4rpx 2rpx 2rpx;
		border-color: #2169D3;
		border-style: solid;

		font-size: 20rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.top-title {
		margin-left: 40rpx;
		color: #2169D3;
	}

	.top-right {
		display: flex;
		color: #88AFE8;
		margin-right: 20rpx;
		align-items: center;
	}

	.top-right image {
		width: 35rpx;
	}


	/* center */
	.center {
		display: flex;
		justify-content: space-between;
		padding: 0 10rpx;
	}

	.center-left-item {
		width: 120rpx;
		height: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: url(../../static/index/button_an.png);
		background-size: 100% 100%;
		margin: 20rpx 0rpx;
	}


	.center-left-item text {
		color: #FFFFFF;
		font-size: 17rpx;
	}


	/* 中间消息 */
	.center-center {
		width: 440rpx;
		margin: 25rpx 10rpx 0 0rpx;
		height: 69vh;
		white-space: nowrap;
		overflow-y: auto;
		overflow-x: hidden;
		border:2rpx groove #FFFFFF
	}

	.center-center-item {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		width: 440rpx;
		padding: 7rpx 5rpx;
		border-bottom: 2rpx solid #FFFFFF;
		color: #FFFFFF;
		font-size: 16rpx;
		overflow-x: auto;
	}

	.data_item {
		color: #000000;
		/* font-weight: 700; */
	}

	.center-center-item text {
		margin-right: 10rpx;
	}

	.center-center-item:nth-child(odd) {
		background-color: #88AFE8;
	}

	.center-center-item:nth-child(even) {
		background-color: #ACC4E6;
	}

	.center-center-item:last-child {
		border-bottom: 0;
	}

	/* right */
	.center-right-item {
		display: flex;
		align-items: center;
	}

	.center-right-item image {
		width: 140rpx;
		margin-top: -89rpx;
		margin-left: 10rpx;
		margin-bottom: -110rpx;
	}

	.center-right-item text {
		position: absolute;
		right: 40rpx;
		margin-top: 15px;
		color: #FFFFFF;
		font-size: 17rpx;
	}

	.center-right {
		margin-left: -10rpx;
	}


	/* 消息弹框 */
	.messageBox-image,
	.messageBox-content {
		display: flex;
		/* flex-direction: column; */
		align-items: center;
		justify-content: center;
	}

	.messageBox image {
		width: 100rpx;
	}


	.messageBox-content {
		/* margin-top: 0rpx; */
		font-weight: 700;
		font-size: 24rpx;
	}

	.messageBox-content {
		margin: 70rpx 0 30rpx 0;
	}

	.dot {
		width: 20rpx;
	}

	./* u-model__content__message {
		padding: -10rpx !important;
		font-size: 17rpx !important;
	} */

	/* .u-model__footer__button,
	.u-model__footer__button hairline-left {
		font-size: 17rpx !important;
		height: 70rpx !important;
	} */

	.cont {
		width: 160rpx;
		margin: 20rpx;
		height: 150rpx;
		font-size: 16rpx;
		/* padding: 20rpx; */
		/* margin: 10rpx; */
		/* overflow-y: auto; */
	}
</style>
